// 进入index.html时，判断是否本地储存中有token
if(!localStorage.getItem('user-token')) location.href='./login.html'

window.addEventListener('DOMContentLoaded',async ()=>{
    const res = await axios('/dashboard')
     console.log(res)

    // 渲染首页看板
    // document.querySelector('span[name=salary]').innerHTML= res.data.overview.salary
    // document.querySelector('span[name=student_count]').innerHTML= res.data.overview.student_count
    // document.querySelector('span[name=age]').innerHTML= res.data.overview.age
    // document.querySelector('span[name=group_count]').innerHTML= res.data.overview.group_count

    // 优化
    // document.querySelector('span[name=属性名]').innerHTML= res.data.overview.属性名
    for(let key in res.data.overview) {
        document.querySelector(`span[name=${key}]`).innerHTML= res.data.overview[key]
    }

    //  调用渲染全年薪资走势
    initYearCharts(res.data.year)

    // 调用渲染班级薪资
    initClassCharts(res.data.salaryData)

    // 调用渲染每组薪资走势
    initGroupCharts(res.data.groupData,1)

    // 点击之后切换每组数据
    document.querySelector('#btns').addEventListener('click',e=>{
        if(e.target.tagName==='BUTTON'){
            // 排他
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            // 自己变亮
            e.target.classList.add('btn-blue')
            // console.log(e.target.innerHTML)
            initGroupCharts(res.data.groupData,e.target.innerHTML)
        }
    })

    // 调用渲染男女薪资分布
    initGenderCharts(res.data.salaryData)

    // 调用渲染籍贯
    initMapChart(res.data.provinceData)
})



// 封装渲染全年薪资走势
function initYearCharts(year) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('#line'));

    // 指定图表的配置项和数据
    let option = {
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
        title:{
          text:'2023年全学科薪资走势',
          textStyle:{
            fontSize:14
          },
          left:10,
          top:10
        },
        xAxis: {
          type: 'category',
        //   data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          data: year.map(item=>item.month),
          axisLine:{
            show:true,
            lineStyle:{
              type:'dashed',
              color:'#cccccc'
            }
          },
          axisLabel:{
            color:'#3c3c3c'
          }
        },
        yAxis: {
          type: 'value',
          splitLine:{
            show:true,
            lineStyle:{
            type:'dashed'
            }
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: year.map(item => item.salary),
            type: 'line',
            symbolSize:12,
            smooth: true,
            lineStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#4a99ee' // 0% 处的颜色
                }, {
                    offset: 1, color: '#587cef' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              width:6
            },
            areaStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#cde2fa' // 0% 处的颜色
                }, {
                    offset: .8, color: '#fff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

//  封装渲染班级薪资
  function initClassCharts(salary) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('#salary'));

    // 指定图表的配置项和数据
    let option = {
        title:{
          text:'班级薪资分布',
          textStyle:{
            fontSize:14,
          },
          top:20,
          left:30
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        color:['#fda225','#5097ff','#3abdfa','#34d49a'],
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            radius: ['30%', '40%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              }
            },
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' }
            // ]
            data: salary.map(item=>{
                return {
                    value:item.g_count+ item.b_count,
                    name:item.label
                }
            })
          }
        ]
      };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

// 封装渲染每组薪资走势
function initGroupCharts(group,num) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('#lines'));

    // 指定图表的配置项和数据
    let option = {
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
        xAxis: {
          type: 'category',
        //   data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          data: group[num].map(item=> item.name),
          axisLine:{
            show:true,
            lineStyle:{
              type:'dashed',
              color:'#cccccc'
            }
          },
          axisLabel:{
            color:'#3c3c3c'
          }
        },
        yAxis: {
          type: 'value',
          splitLine:{
            show:true,
            lineStyle:{
            type:'dashed'
            }
          }
        },
        color:[{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#3dd49e' // 0% 处的颜色
            }, {
                offset: 1, color: '#c8f2e4' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#51a3ef' // 0% 处的颜色
            }, {
                offset: 1, color: '#d1e6fb' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
          tooltip:{},
        series: [
          {
            name:'期望薪资',
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: group[num].map(item=>item.hope_salary),
            type: 'bar',
          }, {
            name:'实际薪资',
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: group[num].map(item=>item.salary),
            type: 'bar',
          }
        ]
      };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

// 封装渲染男女薪资分布图
function initGenderCharts(gender) {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('#gender'));

    // 指定图表的配置项和数据
    let option = {
        title:[
           {
          text: '男女薪资分布',
          textStyle:{
            fontSize:14
          },
          left:10,
          top:10,
        },
         {
          text: '男生',
          textStyle:{
            fontSize:14
          },
          left:'center',
          top:'45%',
        },
         {
          text: '女生',
          textStyle:{
            fontSize:14
          },
          left:'center',
          top:'90%',
        }
          ],
        tooltip: {
          trigger: 'item'
        },
        color:['#fda225','#5097ff','#3abdfa','#34d49a'],
        series: [
          {
            name: '男生',
            type: 'pie',
            radius: ['15%','25%'],
            center:['50%','25%'],
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' }
            // ],
            data: gender.map(item=>({
                value:item.b_count,
                name:item.label
            })),
          },
          {
            name: '女生',
            type: 'pie',
            radius: ['15%','25%'],
             center:['50%','70%'],
             data: gender.map(item=>({
                value:item.b_count,
                name:item.label
            }) ),
          }
        ]
      };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

// 封装渲染籍贯
const initMapChart = (provinceData) => {
    const myEchart = echarts.init(document.querySelector('#map'))
    console.log(provinceData)
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]

    dataList.forEach(item=>{
        const obj = provinceData.find(el=> el.name.replace(/省|维吾尔自治区|回族自治区|自治区|壮族自治区/g,'') === item.name)
        console.log(obj)
        if(obj) item.value=obj.value
    })



    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }
